<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>登陆系统</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
body {
	
	background-image: url("img/bgi-login.png");
}

.navbar {
	width: 650px;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	border-radius:3px 3px 0 0 ;
	box-shadow:5px 5px 5px gray;
}

.well {
	width: 479px;
	padding-top:50px;
	padding-bottom: 50px;
	padding-left: 150px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -20px;
	border: 1px solid black;
	border-radius:0 0 3px 3px;
	box-shadow:5px 5px 10px gray;
}
</style>
</head>
<body>
	<div class="navbar ">
		<div class="navbar-inner ">
			<div class="container ">
				<a class="brand" href="javascript:;" style="font-weight:bold">系统登陆</a>
				<div class="nav-collapse"></div>
			</div>
		</div>
	</div>

	<form class="well">
		<div class="alert alert-error " style="display:none;width:250px">
			<a class="close" href="javascript:;">×</a> <strong></strong>
		</div>
		
		<label style="font-weight:bold">用户名</label> 
		<input type="text" placeholder="请输入用户名" class="span4" id="name" name="name" /> <span class="help-block"></span>
		<label style="font-weight:bold">密码</label>
		<input type="password" placeholder="请输入密码" class="span4" id="pwd" name="password" />  <span class="help-block"></span>
		<br /> <a class="btn btn-primary" style="font-weight:700" id="login" title="登陆系统查看系统资源"><i class="icon-share-alt icon-white"></i>登入系统</a>&nbsp;&nbsp;&nbsp;<a href="#signform" style="font-weight:700" class="btn btn-primary" data-toggle="modal" title="只有注册用户才能访问系统资源。"  id="tosign"><i class="icon-user icon-white"></i>注册</a>
	</form>
	
	<div class="modal fade" id="signform">
	    <div class="modal-header">
	    	<a class="close" data-dismiss="modal">×</a>
	    <h3>注册新用户</h3>
	    </div>
	    <div class="modal-body">
	   		<form class="form-horizontal">
	   			
		        <fieldset>
		          <div class="control-group">
		            <label for="input01" class="control-label ">用户名：</label>
		            <div class="controls">
		              <input type="text" id="signname" class="input-xlarge "/>
		              <span class="help-block" id="help-name" style="color:green">用户名不多于20个字符</span>
		            </div>
		           
		          </div>
		          <div class="control-group">
		            <label for="input01" class="control-label ">密码：</label>
		            <div class="controls">
		              <input type="password" id="signpwd" class="input-xlarge "/>
		              <span class="help-block" id="help-pwd" style="color:green">密码不多于18个字符</span>
		            </div>
		          </div>
		          <div class="control-group">
		            <label for="input01" class="control-label ">验证码：</label>
		            <div class="controls">
		            <input type="text" id="check" class="input-xlarge "/>
		              <img src="jcaptcha.jpg" alt="" id="checkcode" /><a href="javascript:;" id="changecode">看不清?</a>
		              <span class="help-block" id="help-check" style="color:green">请输入验证码</span>
		            </div>
		          </div>
		          
		        </fieldset>
		      </form>
	    </div>
	    <div class="modal-footer">
	    <a href="javascript:;" class="btn" data-dismiss="modal">返回</a>
	    <a href="javascript:;" class="btn btn-primary"id="btn-sign" >注册</a>
	    </div>
	</div>

	
	<script type="text/javascript">
		$(document).ready(function() {
			$("#changecode").click(function(){
				$("#help-check").text("请输入验证码");
				$("#help-check").css("color","green");
				$("#checkcode").attr("src","jcaptcha.jpg?x="+new Date());
			});
			$("#tosign").click(function(){
				$("#signname").val("");
				$("#signpwd").val("");
				$("#check").val("");
				$("#help-name").text("用户名不多于20个字符");
				$("#help-name").css("color","green");
				$("#help-pwd").text("密码不多于18个字符");
				$("#help-pwd").css("color","green");
				$("#help-check").text("请输入验证码");
				$("#help-check").css("color","green");
				$("#checkcode").attr("src","jcaptcha.jpg?x="+new Date());
			});
		
			$("#signname").blur(function(){
				if($("#signname").val().trim() == ""){
					$("#help-name").text("不能为空！");
					$("#help-name").css("color","red");
				}else if($("#signname").val().trim().length > 20){
					$("#help-name").text("用户名过长");
					$("#help-name").css("color","red");
				}else {
				var name = $("#signname").val().trim();
					$.ajax({
						url:"sign.jspx",
						type:"POST",
						data:{signname:name},
						success:function(mess){
							
							if(mess == "ok"){
								$("#help-name").text("用户名可用√");
								$("#help-name").css("color","green");
							}else if(mess == "fail"){
								$("#help-name").text("用户名已经存在");
								$("#help-name").css("color","red");
							}
					}
					});
				}
				
			});
			$("#signpwd").blur(function(){
				
				if($("#signpwd").val().trim() == ""){
					$("#help-pwd").text("不能为空！");
					$("#help-pwd").css("color","red");
				}else if ($("#signpwd").val().trim().length > 18){
					$("#help-pwd").text("密码长度过长");
					$("#help-pwd").css("color","red");
				}else{
					$("#help-pwd").text("密码可用√");
					$("#help-pwd").css("color","green");
				}
				
			});
			$("#btn-sign").click(function(){
			
			var name = $("#signname").val();
			var pwd = $("#signpwd").val();
			var checkcode = $("#check").val();
				if(name.trim() != "" && name.trim().length < 20 && pwd.trim() != "" && pwd.trim().length < 18 && checkcode.trim() != ""){
					$.ajax({
						url:"sign.jspx",
						type:"POST",
						data:{signname:name,password:pwd,checkcode:checkcode},
						success:function(mess){
							
							if(mess == "ok"){
								alert("注册成功！");
								$("#checkcode").attr("src","jcaptcha.jpg?x="+new Date());
								$("#help-check").text("请输入验证码");
								$("#help-check").css("color","green");
								
							}else if(mess=="checkerror"){
								$("#help-check").text("验证码错误！");
								$("#help-check").css("color","red");
								$("#checkcode").attr("src","jcaptcha.jpg?x="+new Date());
							}
							
							else{
								alert("用户名已经存在！");
							}
					}
					});
				}else{
					alert("信息不完整或者不符合格式！");
					$("#checkcode").attr("src","jcaptcha.jpg?x="+new Date());
				}
			
			
			});
			
			
			
			$(".close").click(function() {
				$(".alert-error").slideUp(200);
			});
		
			$("#login").click(function() {
				var name = $("#name").val();
				var pwd = $("#pwd").val();
				
				if (name.trim() == "" || pwd.trim() == "") {
					
					$(".alert-error").slideDown(200);
					$("strong").text("用户名或者密码不能为空");
				}else if(name.length > 20) {
					$(".alert-error").slideDown(200);
					$("strong").text("用户名不超过20个字符！");
				}else if(pwd.length > 18){
					$(".alert-error").slideDown(200);
					$("strong").text("密码不得超过18位！");
				}
				
				else {
					$.ajax({
							url : "index.jspx",
							type : "POST",
							data : {
								
								name : name,
								password : pwd
								
							},
							beforeSend:function(){
								$("#login").text("登录中...");
							},
							success:function(msg){
								$("#login").text("登入系统");
								if(msg == 10002) {
									$(".alert-error").slideDown(200);
										
										$("strong").text("用户名或者密码错误");
										 $("#pwd").val("");
									} else if(msg == 10001) {
										$(".alert-error").slideDown(200);
										$("strong").text("用户名或者密码不能为空");
									}else if(msg == 10000){
										window.location.href = "main.jspx";
									}
								}
						});
				}
			});

		});
	</script>
</body>
</html>

